.sidebar {
  width: 360px;
  height: 100%;
  border-right: 1px solid #e8e8e8;
  position: relative;
}
.header-img {
  border-radius: 50%;
}
.name {
  font-size: 20px;
  font-weight: 600;
  font-family: Lato,PingFang SC,Microsoft YaHei,sans-serif;
  margin: 12px 0 8px 0;
}
.slogan {
  font-size: 12px;
}
.logo {
  width: 20px;
  height: 20px;
  font-size: 20px;
  margin-right: 8px;
}
.sidebar .links {
  width: 80%;
  margin-top: 12px;
  margin-bottom: 42px;
  flex-wrap: wrap;
  justify-content: center;
}
.sidebar .item {
  margin-right: 12px;
  padding: 4px 8px;
  margin-top: 8px;
  border-radius: 2px;
}
.sidebar .item:hover {
  background: #eee;
}
.sidebar .tags {
  width: 88%;
  flex-wrap: wrap;
  justify-content: flex-start;
}
.sidebar .tag {
  display: inline-block;
  margin-right: 14px;
  margin-bottom: 12px;
}
.articles {
  width: 100%;
}
.articles ul li{
  text-align: left;
  margin-bottom: 8px;
  color: #737373;
}
.articles ul li a:hover {
  text-decoration: underline;
}
.hidden-sidebar {
  position: absolute;
  top: 12px;
  right: 12px;
  cursor: pointer;
  display: none;
}
.sidebar:hover .hidden-sidebar{
  display: block;
}
.sidebar.hidden {
  animation: slideOutRight 1s ease;
  margin-left: -320px;
}
.sidebar.show {
  animation: slideInLeft 1s ease;
  margin-left: 0;
}
@keyframes slideOutRight {
  from { margin-left: 0; }
  to { margin-left: -320px; }
}
@keyframes slideInLeft {
  from { margin-left: -320px; }
  to { margin-left: 0; }
}